<script setup lang="ts">
import SlotComponent from '@/components/SlotComponent/index.vue'
</script>

<template>
  <h1>具名插槽（没有名字，就是默认插槽）、作用域插槽</h1>
  <SlotComponent>
    <!--默认插槽-->
    <template v-slot>插槽文本</template>
    <!--具名插槽-->
    <template v-slot:a>name为a的插槽，v-slot:xxx ，可简写#xxx</template>
    <template #b>name为b的插槽</template>
    <!--作用域插槽。数据可使用解构语法-->
    <template v-slot:c="{ row, index }">
      <div :style="[row.done ? 'color:green' : 'color:red']">{{ index }} - {{ row.title }}</div>
    </template>
  </SlotComponent>
</template>

<style scoped></style>
